<template>
  <div class="recordBlack" :style="recordStyle">
    <div class="recordIn">
      <div class="lines" :style="lineStyle"/>
    </div>
    <div class="sun"/>
    <div class="cd" :style="cdStyle">
      <div class="round" :style="cdRoundStyle"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Record',
  props: {
    size: {
      type: String || Number,
      default: '200px'
    },
    lineSize: {
      type: String || Number,
      default: '180px'
    },
    cdSize: {
      type: String || Number,
      default: '50px'
    },
    cdRoundSize: {
      type: String || Number,
      default: '20px'
    }
  },
  computed: {
    recordStyle () {
      const size = typeof this.size === 'string' ? this.size : this.size + 'px'
      return {
        width: size,
        height: size
      }
    },
    lineStyle () {
      const size = typeof this.lineSize === 'string' ? this.lineSize : this.lineSize + 'px'
      return {
        width: size,
        height: size
      }
    },
    cdStyle () {
      const size = typeof this.cdSize === 'string' ? this.cdSize : this.cdSize + 'px'
      return {
        width: size,
        height: size
      }
    },
    cdRoundStyle () {
      const size = typeof this.cdRoundSize === 'string' ? this.cdRoundSize : this.cdRoundSize + 'px'
      return {
        width: size,
        height: size
      }
    }

  }
}
</script>

<style scoped lang="less">

.recordBlack {
  background: black;
  position: relative;
  border-radius: 50%;
  .recordIn {
    width: 100%;
    height: 100%;
    position: absolute;
    //animation: cricle 1s linear infinite;
    .lines {
      width: 180px;
      height: 180px;
      background: repeating-radial-gradient(#222, #222 5px, #1c1c1c 7px);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
  }
  .cd {
    width: 50px;
    height: 50px;
    background: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    border: 6px solid rgba(0,0,0,.87);
    .round {
      position: absolute;
      left: 50%;
      top: 50%;
      background: #222;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .sun {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg, transparent 35%,
      rgba(255,255,255,.2) 45%,
      rgba(255,255,255,.3) 50%,
      rgba(255,255,255,.2) 55%,
      transparent
    );
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

  }
}

</style>
